﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drag & Drop</title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/assets/master.css" />
<noscript>
<link rel="stylesheet" href="css/assets/mobile.min.css" />
</noscript>
<script src="js/jquery-1.7.1.js" type="text/javascript" ></script>
<script src="js/jquery-ui-1.8.21.custom.min.js" type="text/javascript" ></script>
<link href="js/jquery-ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/miCss.css"  rel="stylesheet" type="text/css" media="all" />

<!--<link href="960/960.css"  rel="stylesheet" type="text/css" media="all" />
<link href="960/reset.css" rel="stylesheet" type="text/css" media="all" />-->

<script type="text/javascript">
	$(function(){
		var saldo1 = 500;
		var saldo2 = 800;
		var saldo3 = 1200;
		
		$('.tarjeta1').find('.saldo1').append(saldo1);
		
		//$("#acordeon").accordion();
		//$("#cart").accordion();
		//$("#gadgets").accordion();
					
		
					
		
		$(".sortable").sortable({
			revert:true,
			
			});
		
		
		$("#acordeon").find("ul").find("li").find('.saldo1').draggable({
				helper:'clone',
				appendTo:'body'
				
				
			});
		$("#cart").find(".tarjeta").droppable({
			activeClass: 'ui-state-default',
			hoverClass: 'ui-state-hover',
			drop : function(event, ui){
				//$(this).
				//alert(ui.draggable.text());
				//alert(ui.droppable.text());
				//ui.draggable.find(".drag").remove();
				//$(this).find(".aqui").remove();
				//$(this).append("<li>"+ui.draggable.text()+"</li>");
				}
			});
		});
</script>
<script type="text/javascript">
	var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'css/assets/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1940px = 1560.min.css',
    '1940px to 2540px = 1920.min.css',
    '2540px           = 2520.min.css'
  ]
};
</script>
<script src="js/adapt.min.js" type="text/javascript" ></script>

</head><div class="container_12">
  <div class="grid_4 left"><img src="img/logo_s2.jpg" /></div>
  <div class="grid_4 center"><img  src="img/arrastrar_s2.jpg" /></div>
  <div class="grid_4 right" ><img src="img/perfil_s2.jpg" /></div>
  
  <div class="sortable">
    <div id="acordeon" class="grid_4">
      <h3><a href="#">Cuentas</a></h3>
      <div class="sortable">
        <div class="tarjeta">
          <h4>Débito <strong>ScotiaCard</strong> Soles</h4>
          <p>Monto Disponible<span>s/.2600</span></p>
          <p>Monto Real<span>s/.2800</span></p>
        </div>
        <div class="tarjeta">
          <h4>Débito <strong>ScotiaCard</strong> Dolares</h4>
          <p>Monto Disponible<span>$ 2600</span></p>
          <p>Monto Real<span>$ 2800</span></p>
        </div>
        <div class="tarjeta">
          <h4>Tarjeta Crédito Mastercard</h4>
          <p>Monto Disponible<span>$ 2600</span></p>
          <p>Monto Real<span>$ 2800</span></p>
        </div>
        <div class="tarjeta">
          <h4>Débito Crédito Visa</h4>
          <p>Monto Disponible<span>$ 2600</span></p>
          <p>Monto Real<span>$ 2800</span></p>
        </div>
      </div>
    </div>
   
    <div id="cart" class="grid_4">
      <h3><a href="#">Pagos Frecuentes</a></h3>
      <div class="sortable">
        <div class="tarjeta">
          <h4>Recibo de Luz</h4>
          <p>Deuda total:<span>s/.280</span></p>
          <p>Deuda del mes:<span>s/. 100</span></p>
        </div>
        <div class="tarjeta">
          <h4>Recibo de Agua</h4>
          <p>Deuda total:<span>s/.280</span></p>
          <p>Deuda del mes:<span>s/. 100</span></p>
        </div>
        <div class="tarjeta">
          <h4>Pago Tarjeta de Crédito</h4>
          <p>Deuda total:<span>s/.280</span></p>
          <p>Deuda del mes:<span>s/. 100</span></p>
        </div>
      </div>
    </div>
    
    <div id="gadgets" class="grid_4">
      <h3><a href="#">Gadgets</a></h3>
      <div>
        <ol>
          <li class="aqui">Datos</li>
        </ol>
      </div>
    </div>
    
  </div>
</div>

<body>
</body>
</html>
